import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
import {
  generateGradientBackgroundByString,
  generateRandomColorByString,
} from '@/utils/ui'
import { Users } from 'lucide-react'

interface IMAvatarProps {
  type?: 'user' | 'group' | 'notification'
  avatar?: string
  showName: string | null | undefined
  size: number
  className?: string
}

export function IMAvatar(props: IMAvatarProps) {
  const { type = 'user', avatar, showName, size, className } = props

  const avatarFallback = (() => {
    switch (type) {
      case 'user': {
        return (
          <AvatarFallback
            className='text-white font-semibold select-none'
            style={{
              fontSize: `${size / 16 / 2}rem`,
              backgroundImage: showName
                ? generateGradientBackgroundByString(showName)
                : undefined,
            }}
          >
            {showName?.slice(0, 1)}
          </AvatarFallback>
        )
      }
      case 'group': {
        return (
          <AvatarFallback
            className='bg-background select-none'
            style={{
              color: generateRandomColorByString(showName || ''),
              border: `2px solid ${generateRandomColorByString(showName || '')}`,
            }}
          >
            <Users
              style={{
                width: `${size / 16 / 2}rem`,
                height: `${size / 16 / 2}rem`,
              }}
              strokeWidth={2.5}
            />
          </AvatarFallback>
        )
      }
    }
  })()

  return (
    <Avatar
      className={className}
      style={{ width: `${size / 16}rem`, height: `${size / 16}rem` }}
    >
      <AvatarImage src={avatar} alt='avatar' />
      {avatarFallback}
    </Avatar>
  )
}
